{% stylesheet %}

.block_product_preview_history .block_collection_product ul {
  display: grid;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_product_preview_history .block_collection_product li {
  list-style-type: none;
  line-height: 1.4;
  text-align: center;
}

.block_product_preview_history .block_collection_product .product_pic {
  margin-bottom: 26px;
  position: relative;
}

.block_product_preview_history .block_collection_product .soldout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
}

.block_product_preview_history .block_collection_product .product_pic .product_img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.block_product_preview_history .block_collection_product .product_pic img {
  max-width: 100%;
}

.block_product_preview_history .block_collection_product .block_product_name {
  margin-bottom: 4px;
  line-height: 1.5;
}

.block_product_preview_history .block_collection_product .product_price {
  font-weight: bold;
}

.block_product_preview_history .block_collection_product .product_oldprice {
  color: #888;
  text-decoration: line-through;
  margin-left: 5px;
  display: inline-block;
  font-weight: normal;
}

.block_product_preview_history .collection_product_pc_3 ul {
  grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_product_preview_history .collection_product_pc_4 ul {
  grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_product_preview_history .collection_product_pc_5 ul {
  grid-template-columns: repeat(5, calc(20% - 24px));
}

.block_product_preview_history .block_collection_product_more {
  margin-top: calc(var(--general_layout_spacing) * 0.5);
  text-align: center;
}

.block_product_preview_history .block_collection_product_more a {
  margin: 0;
}

@media(max-width: 768px) {
  .block_product_preview_history .block_collection_product ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
  }
}

@media(max-width: 767px) {
  .block_product_preview_history .block_collection_product ul {
    grid-row-gap: 20px;
    grid-column-gap: 14px;
    grid-template-columns: repeat(2, calc(50% - 7px));
  }

  .block_product_preview_history .collection_product_wap_1 ul {
    display: block;
  }

  .block_product_preview_history .collection_product_wap_1 ul li {
    margin-bottom: 20px;
  }

  .block_product_preview_history .block_collection_product_more {
    margin-top: 30px;
  }

  .block_product_preview_history .block_collection_product .product_pic {
    margin-bottom: 16px;
  }
}

{% endstylesheet %}


{% assign number = section.settings.product_number | default: 8 %}
{% assign block_id = block_id | default : section.block_id  %}

  <div class="block_product_preview_history" id="block_product_preview_history-{{block_id}}" style="display: none;">
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
      {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

      <div class="block_collection_product collection_product_pc_{{ section.settings.pc_number }} collection_product_wap_{{ section.settings.wap_number }}">
        <ul id="product_preview_history-{{block_id}}">
          
        </ul>
      </div>
    </div>
  </div>

{% include 'collection_product_waterfall' %}
<script>
	$(function(){
		moi.ajax({
			type: "get",
        url: "/customer/browsinghistory",
        dataType: "json",
        success: function (response) {
          if (!response.code) {
						if(oemcart_theme_preview == 1 || response.data.length){
							$("#block_product_preview_history-{{block_id}}").show();

							let products = response.data;
							if(response.data.length && oemcart_theme_preview != 1){
								 products = response.data;
							}else if(oemcart_theme_preview == 1){
								products = [];
								products.length = {{number}}
							}
							
							engine.parseAndRender($("#omesaas-collection-product-temp").html(), {
								products: products,
								theme_config: themeConfig,
								lang: lang,
								collection_handle: "",
								data_from: "{{ data_from }}",
								collection_product_url: '{{storeConfig.collection_product_url}}'
							}).then(function(liquidHtml) {
								$("#product_preview_history-{{block_id}}").html(liquidHtml)
								$("#product_preview_history-{{block_id}}").find(".product_view").click(quickview);
							});
						}
          }
        }
		})
	})
</script>


{% schema %}
{
	"tag": "",
	"class": "block_product_preview_history",
	"is_global": false,
	"name": {
		"zh_CN": "最近浏览商品",
		"en_US": "Viewed recently"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"info": {
				"zh_CN": "用户无商品浏览记录时，将隐藏此积木块；积木块在装修及预览模板时，会展示默认占位商品，需查看实际效果可以从店铺后台直接访问【店铺首页】",
				"en_US": "When the user has no product browsing history, this block will be hidden; When the building block is decorated and previewed the template, the default placeholder goods will be displayed. To check the actual effect, you can directly visit the [store home page] from the store background."
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill"
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "产品总数量",
				"en_US": "Total quantity of products"
			},
			"max": 1000,
			"min": 1,
			"id": "product_number",
			"default": 8
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "4"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量",
				"en_US": "Number of mobile terminals per row"
			},
			"id": "wap_number",
			"max": "2",
			"min": "1"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Recently Viewed",
			"detail": "",
			"is_fill": false,
			"product_number": "8",
			"pc_number": "4",
			"wap_number": "2"
		},
		"blocks": []
	},
	"icon": "icon-zhuanjishangpin1"
}
{% endschema %}